﻿<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Adminage - Admin Dashboard</title>

    <!-- favicon -->
    <link rel="icon" href="{% static 'assets/img/favicon.png' %}"sizes="16x16" type="image/png" />

    <!-- Stylesheet Link -->
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}" />
</head>

<body class="t-bg-primary mx-sidenav-not-collapsed">
    <header class="header sticky-top d-none d-xl-block">
            <div class="pagination t-bg-16">
                <div class="container-fluid px-0">
                    <div class="row g-0">
                        <div class="col-12">
                            <ul class="pagination-bar t-list">
                                <li class="pagination-bar__list">
                                    <a href="#"
                                        class="t-link pagination-bar__link text-capitalize">
                                        dashboard
                                    </a>
                                </li>
                                <li class="pagination-bar__list">
                                    <a href="#"
                                        class="t-link pagination-bar__link text-capitalize">
                                        home
                                    </a>
                                </li>
                                <li class="pagination-bar__list">
                                    <a href="#"
                                        class="t-link pagination-bar__link text-capitalize">
                                        dashboard
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    <main class="main-content t-mt-15 t-mb-15">
        <div class="container-fluid px-3">
            <div class="row g-3">
                <div class="col-lg-6 col-xl-4 col-xxl-3">
                    <div class="cards t-bg-white t-shadow h-100">
                        <div class="mx-chart-box">
                            <div id="chart-1"></div>
                            <div
                                class="mx-box mx-box--round mx-box--sm mx-box--light-success rounded-circle mx-chart-box__icon mx-chart-box_price-up">
                                <span class="d-inline-block text-uppercase">
                                    <i class="fa fa-long-arrow-up"
                                        aria-hidden="true"></i>
                                </span>
                            </div>
                            <div class="d-flex align-items-center t-mt-30">
                                <div
                                    class="mx-box mx-box--round mx-box--lg mx-box--light-success t-mr-15">
                                    <span
                                        class="d-inline-block text-uppercase xxlg-text">
                                        <i class="fa fa-puzzle-piece"
                                            aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="d-block">
                                    <span
                                        class="d-block sm-text text-uppercase t-heading-font fw-bold">
                                        5月月度电话诈骗汇总
                                    </span>
                                    <h3 class="mb-0 mt-0">490</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-4 col-xxl-3">
                    <div class="cards t-bg-white t-shadow h-100">
                        <div class="mx-chart-box">
                            <div id="chart-2"></div>
                            <div
                                class="mx-box mx-box--round mx-box--sm mx-box--light-warning rounded-circle mx-chart-box__icon mx-chart-box_price-down">
                                <span class="d-inline-block text-uppercase">
                                    <i class="fa fa-long-arrow-up"
                                        aria-hidden="true"></i>
                                </span>
                            </div>
                            <div class="d-flex align-items-center t-mt-30">
                                <div
                                    class="mx-box mx-box--round mx-box--lg mx-box--light-warning t-mr-15">
                                    <span
                                        class="d-inline-block text-uppercase xxlg-text">
                                        <i class="fa fa-bolt" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="d-block">
                                    <span
                                        class="d-block sm-text text-uppercase t-heading-font fw-bold">
                                        5月月度网络诈骗汇总
                                    </span>
                                    <h3 class="mb-0 mt-0">300</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-4 col-xxl-3">
                    <div class="cards t-bg-white t-shadow h-100">
                        <div class="mx-chart-box">
                            <div id="chart-3"></div>
                            <div
                                class="mx-box mx-box--round mx-box--sm mx-box--light-secondary rounded-circle mx-chart-box__icon mx-chart-box_price-up">
                                <span class="d-inline-block text-uppercase">
                                    <i class="fa fa-long-arrow-up"
                                        aria-hidden="true"></i>
                                </span>
                            </div>
                            <div class="d-flex align-items-center t-mt-30">
                                <div
                                    class="mx-box mx-box--round mx-box--lg mx-box--light-secondary t-mr-15">
                                    <span
                                        class="d-inline-block text-uppercase xxlg-text">
                                        <i class="fa fa-user-plus"
                                            aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="d-block">
                                    <span
                                        class="d-block sm-text text-uppercase t-heading-font fw-bold">
                                        年度电话诈骗汇总
                                    </span>
                                    <h3 class="mb-0 mt-0">400</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-4 col-xxl-3">
                    <div class="cards t-bg-white t-shadow h-100">
                        <div class="mx-chart-box">
                            <div id="chart-4"></div>
                            <div
                                class="mx-box mx-box--round mx-box--sm mx-box--light-danger rounded-circle mx-chart-box__icon mx-chart-box_price-down">
                                <span class="d-inline-block text-uppercase">
                                    <i class="fa fa-long-arrow-up"
                                        aria-hidden="true"></i>
                                </span>
                            </div>
                            <div class="d-flex align-items-center t-mt-30">
                                <div
                                    class="mx-box mx-box--round mx-box--lg mx-box--light-danger t-mr-15">
                                    <span
                                        class="d-inline-block text-uppercase xxlg-text">
                                        <i class="fa fa-shield" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <div class="d-block">
                                    <span
                                        class="d-block sm-text text-uppercase t-heading-font fw-bold">
                                        年度网络诈骗汇总
                                    </span>
                                    <h3 class="mb-0 mt-0">540</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-8 col-xxl-4">
                    <div class="cards t-bg-white t-shadow h-100">
                        <div class="mx-chart-box">
                            <div id="chart-6"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer class="t-mb-30">
        <div class="container-fluid px-3">
            <div class="row g-3">
                <div class="col-12">
                    <div
                        class="t-pt-15 t-pb-15 cards t-bg-white t-shadow text-center sm-text">
                        <span class="t-text-dark">&copy;</span> <a href="#"
                            class="t-link t-link--alpha text-capitalize">Adminage</a>
                        <span class="t-text-dark text-capitalize">all right By <a href="http://www.bootstrapmb.com/">bootstrapmb</a> 2020</span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
    <script src="{% static 'assets/js/jquery.js' %}"></script>
    <script src="{% static 'assets/js/jquery-ui.min.js' %}"></script>
    <script src="{% static 'assets/js/moment.js' %}"></script>
    <script src="{% static 'assets/js/bootstrap-material-datetimepicker.js' %}"></script>
    <script src="{% static 'assets/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'assets/js/slick.min.js' %}"></script>
    <script src="{% static 'assets/js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'assets/js/simplebar.js' %}"></script>
    <script src="{% static 'assets/js/prism.js' %}"></script>
    <script src="{% static 'assets/js/feather.js' %}"></script>
    <script src="{% static 'assets/js/jquery.nice-select.min.js' %}"></script>
    <script src="{% static 'assets/js/dropzone.js' %}"></script>
    <script src="{% static 'assets/js/ion.rangeSlider.js' %}"></script>
    <script src="{% static 'assets/js/jquery.bootstrap-touchspin.min.js' %}"></script>
    <script src="{% static 'assets/js/jquery.barrating.min.js' %}"></script>
    <script src="{% static 'assets/js/fullcalendar.min.js' %}"></script>
    <script src="{% static 'assets/js/apexcharts.js' %}"></script>
{#    {% block content %}#}
{#        <script src="{% static 'assets/js/chart-dash-1.js' %}"></script>#}
{#    {% endblock %}#}
    <script src="{% static 'assets/js/main.js' %}"></script>
    <script>
    var randomizeArray = function (arg) {
        var array = arg.slice();
        var currentIndex = array.length,
            temporaryValue,
            randomIndex;

        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
    };

    // data for the sparklines that appear below header area
    {#var zong = []#}
    console.log({% for da in month%}{{ da.count }},{% endfor %});
    var opt1 = [{% for da in inter_data%}{{ da.count }},{% endfor %}];
    var opt2 = [{% for da in phone_data%}{{ da.count }},{% endfor %}];
    var opt3 = [{% for da in inter_year%}{{ da.count }},{% endfor %}];
    var opt4 = [{% for da in phone_year%}{{ da.count }},{% endfor %}];
    var opt5 = [{% for da in month%}{{ da.count }},{% endfor %}];

    var optionsChart1 = {
        series: [
            {
                data: randomizeArray(opt1),
            },
        ],
        chart: {
            type: "area",
            height: 160,
            sparkline: {
                enabled: true,
            },
        },
        stroke: {
            curve: "smooth",
            width: 2,
        },
        colors: ["#1BC5BD"],
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.8,
                opacityTo: 0.1,
                stops: [0, 95, 100],
            },
        },
        xaxis: {
            crosshairs: {
                width: 1,
            },
        },
        yaxis: {
            min: 0,
        },
        {#subtitle: {#}
            {#text: "50%",#}
        {#    offsetX: 30,#}
        {#    offsetY: 0,#}
        {#    style: {#}
        {#        fontSize: "12px",#}
        {#        color: "#1BC5BD",#}
        {#    },#}
        {# },#}
    };

    var chart1 = new ApexCharts(document.querySelector("#chart-1"), optionsChart1);
    chart1.render();

    var optionsChart2 = {
        series: [
            {
                data: randomizeArray(opt2),
            },
        ],
        chart: {
            type: "area",
            height: 160,
            sparkline: {
                enabled: true,
            },
        },
        stroke: {
            curve: "smooth",
            width: 2,
        },
        colors: ["#ff9f43"],
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.8,
                opacityTo: 0.1,
                stops: [0, 95, 100],
            },
        },
        xaxis: {
            crosshairs: {
                width: 1,
            },
        },
        yaxis: {
            min: 0,
        },
        subtitle: {
            {#text: "30%",#}
            offsetX: 30,
            offsetY: 0,
            style: {
                fontSize: "12px",
                color: "#ff9f43",
            },
        },
    };

    var chart2 = new ApexCharts(document.querySelector("#chart-2"), optionsChart2);
    chart2.render();

    var optionsChart3 = {
        series: [
            {
                data: randomizeArray(opt3),
            },
        ],
        chart: {
            type: "area",
            height: 160,
            sparkline: {
                enabled: true,
            },
        },
        stroke: {
            curve: "smooth",
            width: 2,
        },
        colors: ["#158df7"],
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.8,
                opacityTo: 0.1,
                stops: [0, 95, 100],
            },
        },
        xaxis: {
            crosshairs: {
                width: 1,
            },
        },
        yaxis: {
            min: 0,
        },
        {#subtitle: {#}
        {#text: "16%",#}
        {#    offsetX: 30,#}
        {#    offsetY: 0,#}
        {#    style: {#}
        {#        fontSize: "12px",#}
        {#        color: "#158df7",#}
        {#    },#}
        {#  },#}
    };

    var chart3 = new ApexCharts(document.querySelector("#chart-3"), optionsChart3);
    chart3.render();

    var optionsChart4 = {
        series: [
            {
                data: randomizeArray(opt4),
            },
        ],
        chart: {
            type: "area",
            height: 160,
            sparkline: {
                enabled: true,
            },
        },
        stroke: {
            curve: "smooth",
            width: 2,
        },
        colors: ["#F64E60"],
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.8,
                opacityTo: 0.1,
                stops: [0, 95, 100],
            },
        },
        xaxis: {
            crosshairs: {
                width: 1,
            },
        },
        yaxis: {
            min: 0,
        },
        {#subtitle: {#}
        {#    text: "67%",#}
        {#    offsetX: 30,#}
        {#    offsetY: 0,#}
        {#    style: {#}
        {#        fontSize: "12px",#}
        {#        color: "#F64E60",#}
        {#    },#}
        {# },#}
    };

    var chart4 = new ApexCharts(document.querySelector("#chart-4"), optionsChart4);
    chart4.render();

    var optionsChart6 = {
        series: [
            {
                data: randomizeArray(opt5),
            },
        ],
        chart: {
            type: "area",
            height: 350,
            toolbar: {
                show: false
              }
        },
        stroke: {
            curve: "smooth",
            width: 2,
        },
        colors: ["#ff9f43"],
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.8,
                opacityTo: 0.1,
                stops: [0, 95, 100],
            },
        },
        xaxis: {
            crosshairs: {
                width: 1,
            },
            categories: [
                "Jan",
                "Feb",
                "Mar",
                "App",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec",
                "Jan",
                "Feb",
                "Mar",
                "App",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec",
            ]
        },
        yaxis: {
            min: 0,
        },
        title: {
            text: "年度总诈骗汇总",
            offsetX: 0,
            offsetY: 0,
            style: {
                fontSize: "18px"
            },
        },
        dataLabels: {
            enabled: false
        },

    };

    var chart6 = new ApexCharts(document.querySelector("#chart-6"), optionsChart6);
    chart6.render();
    </script>
</html>
